<template>
  <view class="wrapper">
    <view class="handCenter">
      <canvas
        class="handWriting"
        disable-scroll="true"
        @touchstart="uploadScaleStart"
        @touchmove="uploadScaleMove"
        @touchend="uploadScaleEnd"
        @tap="mouseDown"
        canvas-id="handWriting">
      </canvas>
    </view>
    <view class="buttons">
      <button
        @click="retDraw"
        class="delBtn">
        重写
      </button>
      <button
        @click="subCanvas"
        class="subBtn">
        保存
      </button>
    </view>
  </view>
</template>

<script>
import Handwriting from './signature.js'
import httpEnum from '../../common/httpEnum.js'

export default {
  data() {
    return {
      lineColor: 'black',
      slideValue: 50,
      handwriting: '',
      selectColor: 'black',
      color: '',
      showimg: '',
      share_popup: false,
      uploadUrl: httpEnum.baseUploadUrl + '/freight-business/file/app/upload',
      uploadData: {
        bucketName: 'logistics-control-platform',
        folderName: 'driverPic'
      }
    }
  },
  onReady() {
    const query = uni.createSelectorQuery().in(this)
    this.handwriting = new Handwriting({
      lineColor: this.lineColor,
      slideValue: this.slideValue, // 0, 25, 50, 75, 100
      canvasName: 'handWriting',
      query
    })
  },
  onShow() {
    wx.setPageOrientation({ orientation: 'landscape' })
    // #ifdef APP-PLUS
    uni.showLoading({
      title: '加载中...'
    })
    setTimeout(() => {
      plus.screen.unlockOrientation()
      plus.screen.lockOrientation('landscape-primary')
      uni.hideLoading()
    }, 1200)
    //#endif
  },
  //页面卸载时切换为竖屏配置
  onUnload() {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation('portrait-primary') //锁死屏幕方向为竖屏
    // #endif
  },
  methods: {
    //上传失败
    testerror(res, index, lists, name) {
      this.$api.msg('上传失败')
    },
    // 选择画笔颜色
    selectColorEvent(event) {
      this.selectColor = event
      if (event == 'black') {
        this.color = '#1A1A1A'
      } else if (event == 'red') {
        this.color = '#ca262a'
      }
      this.handwriting.selectColorEvent(this.color)
    },
    retDraw() {
      this.handwriting.retDraw()
    },
    // 笔迹粗细滑块
    updateValue(e) {
      console.log(e.detail)
      this.slideValue = e.detail.value
      this.handwriting.selectSlideValue(this.slideValue)
    },
    uploadScaleStart(event) {
      this.handwriting.uploadScaleStart(event)
    },
    uploadScaleMove(event) {
      this.handwriting.uploadScaleMove(event)
    },
    uploadScaleEnd(event) {
      this.handwriting.uploadScaleEnd(event)
    },
    subCanvas() {
      this.handwriting
        .saveCanvas()
        .then(async (res) => {
          uni.uploadFile({
            url: this.uploadUrl,
            filePath: res,
            name: 'file',
            formData: this.uploadData,
            success: ({ data, statusCode }) => {
              const j = JSON.parse(data)
              if (j.code == '0') {
                uni.$emit('signature', { img: j.result, showImg: res })
                uni.navigateBack()
              } else {
                setTimeout(() => {
                  this.$api.msg(data.message)
                }, 200)
              }
            },
            fail: (error) => {
              console.log(error)
            }
          })
          this.showimg = res
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped="true">
view {
  display: flex;
}
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  font-size: 28rpx;
}

.handWriting {
  background: #fff;
  width: 100%;
  height: 70vh;
}

.handRight {
  align-items: center;
}

.handCenter {
  border: 4rpx dashed #e9e9e9;
  flex: 5;
  overflow: hidden;
  box-sizing: border-box;
  width: 90%;
  margin: 30rpx auto 0;
}
.handTitle {
  flex: 1;
  color: #666;
  justify-content: center;
  font-size: 30rpx;
}
.handBtn {
  flex-direction: column;
  padding: 40rpx 20rpx;
}
.buttons {
  position: fixed;
  bottom: 10rpx;
  width: 100%;
  margin-top: 20rpx;
  justify-content: space-between;
}
.delBtn {
  color: #666;
}
.color {
  align-items: center;
}
.color > text {
  margin-right: 20rpx;
}
.subBtn {
  background: #008ef6;
  color: #fff;
  text-align: center;
  justify-content: center;
}

.black-select {
  width: 60rpx;
  height: 60rpx;
}
.black-select.color_select {
  width: 90rpx;
  height: 90rpx;
}
.red-select {
  width: 60rpx;
  height: 60rpx;
}
.red-select.color_select {
  width: 90rpx;
  height: 90rpx;
}
.slide-wrapper {
  align-items: center;
  margin-bottom: 20rpx;
}
.slider {
  width: 400rpx;
  padding-left: 20rpx;
}
.drop {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 0rpx;
  top: -10rpx;
  box-shadow: 0px 1px 5px #888888;
}

.slide {
  width: 250rpx;
  height: 30rpx;
}
.showimg {
  border: 4rpxsolid #e9e9e9;
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
  background: #eee;
  height: 350rpx;
  margin-top: 40rpx;
  align-items: center;
  justify-content: center;
}
.showimg > image {
  width: 100%;
  height: 100%;
}
.showimg > text {
  font-size: 40rpx;
  color: #888;
}
</style>
